<template>
    <view class="selected-list">
        <view v-for="(item, index) in photosList" :key="index" class="item" @click="replacePhoto(item)">
            <view class="image-box"><image class="image" :src="item.image_url_t" mode="aspectFill"></image></view>
            <view class="close-btn" @click.stop="delectPhoto(item)"><u-icon name="close" color="#fff" size="16"></u-icon></view>
            <view class="photo-index">{{ index + 1 }}</view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        photosList: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    computed: {},
    created() {
    },
    methods: {
        delectPhoto(item){
            this.$emit('delectPhoto',item)
        },
        replacePhoto(item){
            this.$emit('replacePhoto',item)
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.selected-list {
    display: flex;
    overflow-x: scroll;
    .item {
        width: 150rpx;
        height: 100rpx;
        background-color: #c3c3c3;
        border-radius: 10rpx;
        position: relative;
        flex-shrink: 0;
        margin-right: 20rpx;
        margin-top: 30rpx;
        .image-box {
            width: 100%;
            height: 100rpx;
            overflow: hidden;
            .image {
                width: 100%;
                height: 100rpx;
                border-radius: 10rpx;
            }
        }
        .close-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 30rpx;
            height: 30rpx;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &::after {
                position: absolute;
                content: '';
                left: 50%;
                top: 50%;
                width: 200%;
                height: 200%;
                transform: translate(-50%, -50%);
            }
        }
        .photo-index {
            position: absolute;
            left: 0;
            top: 0;
            width: 32rpx;
            height: 32rpx;
            transform: translate(-50%, -50%);
            background-image: linear-gradient(45deg, #6dc35a 0%, #7bcf6b 100%), linear-gradient(#000000, #000000);
            box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(18, 28, 81, 0.05);
            border: solid 2rpx #ffffff;
            box-sizing: border-box;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 22rpx;
            line-height: 22rpx;
        }
    }
    .item:nth-child(1) {
        margin-left: 30rpx;
    }
}
::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
</style>
